<template>
    <div class="top">
        <div class="choose">
                 <span>
                  用户：<input type="text" class="search_child" placeholder="如:图片或用户ID/描述" v-model="searchValue"></span>
            <span>
                  上传时间：<input type="date" class="search_child" v-model="picturesPage.dateTime"></span>
            <span  class="search_click" @click="search_">搜索</span>
        </div>


        <span class="add" @click="anno">
             十 &nbsp;新增
        </span>
        <div class="t_right_">
            状态:
            <label>
                <input name="statue" checked type="radio" @click="condition_(2)">全部
            </label>
            <label>
                <input name="statue" type="radio" @click="condition_(1)">已启用
            </label>
            <label>
                <input name="statue" type="radio" @click="condition_(0)">审核中
            </label>
            <label>
                <input name="statue" type="radio" @click="condition_(-1)">已禁用
            </label>

        </div>


    </div>


    <div class="bottom">
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr style="height: 40px">
                <th>序号</th>
                <th>图片ID</th>
                <th>上传人ID</th>
                <th>分类</th>
                <th>图片</th>
                <th style="min-width: 100px">上传时间</th>
                <th style="width: 500px">描述</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in fuzzyQueries" v-if="fuzzyQueries.length>0">
                <td>{{ total.current > 1 ? (index + 1) + 6 * (total.current - 1) : index + 1 }}</td>
                <td v-html="highlight_(item.id )"></td>
                <td class="w_title" v-html="highlight_(item.uid )"></td>
                <td>
                    <div class="type">
                              <span v-for="item_type in (item.type).toString().split(',')">
                                   {{item_type}}
                              </span>

                    </div>
                </td>
                <td>
                    <p v-if="!item.path">无</p>
                    <img v-else :src=" item.path" alt="图片丢失或不存在"
                         style="width:155px;height: 90px;margin-top: 5px">
                </td>
                <td>{{ item.time }}</td>
                <td v-html="highlight_(item.description )"></td>
                <td>
                          <span class="button_style"
                                :style="{'background': item.statue === 1 ? '#32CD32': item.statue === 0 ? '#efcb04':'#DC143C' }">
                             {{ item.statue === 1 ? '审核成功' : item.statue === 0 ? '审核当中' : '审核失败' }}
                          </span>
                </td>
                <td>
                    <span class="edit" @click="browse(item)">详情</span>
                    <span class="edit del" @click="edit_userInfo(item,index)">删除</span>
                </td>
            </tr>
            <tr v-else-if="fuzzyQueries.length===0 && load_" style="height: 50vh;background: transparent">
                <LoadTheAnimation ></LoadTheAnimation>
            </tr>
            <tr v-show="!load_">
                <td></td>
                <td></td>
                <td></td>
                <td><h2>未查询到任何数据</h2></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="bottom_">
        <span style="margin-right:10px">共{{ total.page }}页, 共{{ total.sum }}条数据 当前第{{ total.current }}页</span>
        <span class="jian" @click="left_">
               <img src="../../../public/static/jian_r.png" alt="">
          </span>
        <input type="text" class="limit" v-model="total.current" @focusout="limit_">
        <span class="jian" @click="right_">
               <img src="../../../public/static/jian_l.png" alt="">
          </span>
        <select @change ="page_($event)" class="page_index">
            <option  v-for="(item,index) in 3" >{{(index+1)*7}}/条</option>
        </select>
    </div>
    <ImageEditing v-show="edit_" @edit="edit" :info="info"> </ImageEditing>
    <PromptWindow v-show="box_confirms"  @confirm="confirm"  :info="info" :index="index_p"></PromptWindow>
    <ImageAdd @shutDown="shutDown" v-show="editImg"></ImageAdd>
</template>

<script>
import api from "@/api";
import ImageViewing from "@/components/greatPictures/ImageViewing.vue";
import PromptWindow from "@/components/publicCommon/PromptWindow.vue";
import PrivateSpaceEdit from "@/components/privateSpace/PrivateSpaceEdit.vue";
import ImageEditing from "@/components/greatPictures/ImageEditing.vue";
import ImageAdd from "@/components/greatPictures/ImageAdd.vue";
import LoadTheAnimation from "@/components/publicCommon/LoadTheAnimation.vue";
import PromptInformation from "@/components/publicCommon/PromptInformation.vue";

export default {
    name: "GreatPictures.vue",
    components: {
        PromptInformation,
        LoadTheAnimation, ImageAdd, ImageEditing, PrivateSpaceEdit, PromptWindow, ImageViewing},
    data() {
        return {
            masking:false,
            img_index:'',
            select: false,
            searchValue: "",
            fuzzyQueries: "",
            index: 1,
            condition: 1,
            picturesPage: {
                index: 1,
                condition: null,
                types:2,
                page:7,
                dateTime:null,
            },
            total: {
                sum: '',
                page: '',
                size: '',
                current: '',
            },
            info: "",
            box_confirms: false,
            index_p:"",
            del_info: false,
            editImg:false,
            edit_:false,
            load_:true,
            request_info:"",
        }
    },
    watch: {
        'picturesPage.dateTime'(newValue,oldValue){
            if(newValue == "") {
                this.picturesPage.dateTime = null
                this.request_(this.picturesPage);
            }
        },
        'picturesPage.page'(newValue,oldValue){
             this.picturesPage.page = newValue;
             this.request_(this.picturesPage);
        },
        searchValue(newValue,oldValue){
            if(newValue === ""){
                this.picturesPage.condition =null
                this.request_(this.picturesPage);
            }else{
                this.picturesPage.condition = newValue
            }
        },
        del_info(newValue, oldValue) {
            if (newValue) {
                if (newValue) {
                    api.pictureDelete({id:this.info.id,path:this.info.path}).then((res)=>{
                        if(res.data.code === 200){
                            this.$store.commit("requestInfo", "删除成功");
                            this.request_(this.picturesPage);
                        }else{
                            this.$store.commit("requestInfo", "删除失败");
                        }
                    })
                }
            }
            this.del_info = false;
            this.info = "";
        },
        'total.current'(newVal, oldVal) {
            let reg = /^\+?[1-9]\d*$/;
            if (reg.test(newVal)) {
                this.picturesPage.index = newVal;
            }
            if (newVal > this.total.page) {
                this.picturesPage.index = 1;
            }
        }
    },
    mounted() {
        this.request_(this.picturesPage);
    },
    methods: {
        page_(event){
            this.picturesPage.page = parseInt(event.target.value);
            this.request_(this.picturesPage);
        },
        edit(){
            this.edit_ = false;
            setTimeout(()=>{
                this.request_(this.picturesPage);
            },1000)
        },
        shutDown(){
          this.editImg = false
        },
        confirm(index, bool) {
            this.box_confirms = false;
            if (bool) {
                this.del_info = true;
                this.fuzzyQueries.splice(index, 1);
            }
        },
        dis(){
            this.masking = false;
        },
        anno(){
            this.editImg = true;
        },
        browse(info){
            this.info = info;
            this.edit_ = true;
        },
        edit_userInfo(info,index) {
            this.info = info;
            this.index_p = index;
            this.box_confirms = true;
        },
        limit_() {
            this.request_(this.picturesPage);
        },
        condition_(condition) {
            this.picturesPage.types = condition;
            this.picturesPage.index = 1;
            this.request_(this.picturesPage);
        },
        request_(articleInformationPage) {
            api.pictureTypeAdmin(articleInformationPage).then((res) => {
                this.fuzzyQueries = res.data.data.records;
                this.total.sum = res.data.data.total;
                this.total.page = res.data.data.pages;
                this.total.current = res.data.data.current;
                this.total.size = res.data.data.size;
                if(this.fuzzyQueries.length===0){
                    setTimeout(()=>{
                        this.load_ = false;
                    },1000)
                }else {
                    this.load_ = true;
                }
            })
        },
        search_() {
            this.request_(this.picturesPage)
        },
        highlight_(text) {
            text = text + "";
            if (this.searchValue !== "")
                return text.replace(this.searchValue, '<span style="background: #f6f604;">' + this.searchValue + '</span>')
            else return text
        },
        left_() {
            this.picturesPage.index -= 1;
            if (this.picturesPage.index < 1) {
                this.picturesPage.index = 1;
                this.$store.commit("requestInfo","已是第一页");
                return;
            }
            this.request_(this.picturesPage);
        },
        right_() {
            this.picturesPage.index += 1;
            if (this.picturesPage.index > this.total.page) {
                this.picturesPage.index = this.total.page;
                this.$store.commit("requestInfo","已是最后一页");
                return;
            }
            this.request_(this.picturesPage);
        }

    }
}
</script>

<style scoped>

.search_child{
    height: 30px;
    padding:0 10px;
    outline:none;
}
.choose{
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.choose span{
    margin-right: 10px;
}
.search_click{
    display: inline-block;
    background: #057cf8;
    padding: 4px 7px;
    color: white;
    cursor: pointer;
}
.search_click:hover{
    opacity: .8;
}
.page_index{
    height: 26px;
    outline: none;
    padding: 0 7px;
    color: #4297ec;
    border: 1px solid #282828;
}
option{
    padding: 10px;
}


tr {
    height: 98px;
    background: #fff;
    margin-bottom: 5px;
    animation: tr_ 0.3s ease-in-out 0s 1 forwards;
}

@keyframes tr_ {
    0% {
        transform: scaleY(0%);
    }
    100% {
        transform: scaleY(100%);
    }
}

.w_title {
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*禁止换行*/
    text-overflow: ellipsis; /*省略号*/

}

tr:nth-child(2n) {
    background: rgba(206, 202, 202, 0.5);
}


.add {
    padding: 5px 6px;
    color: white;
    background: #3586f1;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

.add:hover {
    opacity: .9;
}

.type{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.type span{
    background: #3586f1;
    border-radius: 3px;
    color: white;
    padding: 3px;
    margin: 3px;
}
</style>